<template>
  <div
    class="flowcontent"
  >
    <div v-for="(item,index) in itemlist" :key="index" class="flow-item" :style="{
        'flex-basis': 100 / itemlist.length + '%',
      }">
        <div class="process-item__content">
            <div class="item_line"></div>
            <div class="process-item__bg">
                <div class="process-item__title">
                  <div class="process-item__title__inner">444444444444444444444444444444</div>
                </div>
            </div>
        </div>
        <div class="item_text">{{item.name}}</div>
    </div>
  </div>
  <div style="width: 100px;"><p>父级内容aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p></div>
  <child-view :paramt = "title" @on-way="fatherclick"></child-view>
</template>
<script setup lang="ts">

  import ChildView from "@/16_父子组件通信/childView.vue";
  const title:String='father give'

  const fatherclick = (p:any) =>{
    alert('fatcher click' + p)
}
const itemlist=[
  {name : "item1", type : ""},
  {name : "item1", type : ""},
  {name : "item1", type : ""},
  {name : "item1", type : ""},
];
</script>
<style lang="less" scoped>
  .flowcontent{
    padding: 10px 20px;
    display: flex;
    background-color: #00192e;
  }
  .flow-item{
    border-right: 1px solid;
    .process-item__content
    {height: 66px;
      background-color: green;
      width: 100%;
      position: relative;
      .item_line{
        height: 2px;
        background-color: #409EFF;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 0;
      }
      .process-item__bg {
        position: absolute;
        top: 0;
        left: 10%;
        z-index: 0;
        display: inline-flex;
        justify-content: center;
        transition: 0.15s ease-out;
        max-width: 130px;
        width: 76%;
        height: 66px;
        border-radius: 8px;
        background: linear-gradient(
          0deg,
          rgba(27, 126, 242, 0.2),
          rgba(27, 126, 242, 0.2)
        ),
        linear-gradient(180deg, #323647 -3%, #222631 100%);

        box-sizing: border-box;
        border: 1px solid #1b7ef2;
      }
    }

    .item_text{height: 50px;width: 100%; background-color: yellow;}

    .process-item__title {
      padding: 0 5px;
      box-sizing: border-box;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #33fefe;
      width: 100%;
      box-sizing: border-box;
    }
    .process-item__title__inner {
      font-size: 15px;
      line-height: 1.2;
      text-align: left;
      width: 100%;
      box-sizing: border-box;

    }

  }
  .flow-item:first-of-type .item_line{
    &:after{
      position: absolute;
      left: -10px;
      top: -14px;
      display: block;
      content: "○";
      font-size: 20px;
      font-weight: bold;
      color: #33fefe;
    }
  }

</style>